<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $('li:first').css('color','red');//选取li第一个元素
            // $('li:last').css('color','red');//所有li的最后一个元素
            // $('ul:first li:last').css('color','red');//查找第一个ul下最后一个li

            // $('li:not(.red)').css('color','yellow');//反选  除了class=red的所有的li元素

            // $('li:even').css('background','gray');//选取索引(从0开始)的偶数所有的li
            // $('li:odd').css('background','red');//选取索引(从0开始)的奇数所有的li

            // $('li:eq(1)').css('background','red');//查询li下索引为1的元素
            // $('li:gt(2)').css('background','red');//表示li下索引大于2以上的元素
            // $('li:lt(3)').css('background','red');//表示li下索引小于3以下的元素

            // $(':header').css('color','red');//查询所有h1-h6
            // $('h1').css('color','red');//查询 h1
            // $('div:first h1:header').css('color','red');//查询 第一个div下的h1


            //首先获得焦点
            $('input').get(0).focus();
            $(':focus').css('background','red');
        });
    </script>
</head>
<body>
<script>
    /*一.过滤器 过滤选择器 1.主要是通过特定的约束条件，来更加明确的筛选出目标DOM元素对象
    *                     2.过滤器的语法类似与css以:冒号开头
    *二.基本过滤器
    *   $('li:first');选取第一个元素
    *   $('li:last'); 选取最后一个元素
    *   $('ul:first li:last')选取第一个ul下li的最后一个元素
    *   $('li:not(.red)');读取class不是red的li元素  反选
    *   $('li:even')选择索引(0 开始)是偶数的所有元素
    *   $('li:odd');选择索引（0 开始）是奇数的所有元素
    *   $('li:eq(2)');选择索引（0 开始）等于index的元素
    *   $('li:gt(2)');选择索引(0 开始)大于index的元素
    *   $('li:lt(2)');选择索引（0 开始）小于index的元素
    *   $(':header'); 选择标题元素h1---h6的元素
    *   $(':animated');选择正在执行动画的元素
    *   $(':focus');选择当前焦点的元素
    *
    * */
</script>
    <ul >
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
<!--        <li class="red">列表1</li>-->
        <li>列表1</li>
    </ul>
    <ul>
        <li>列表2</li>
        <li>列表2</li>
        <li>列表2</li>
        <li>列表2</li>
        <li>列表2</li>
        <li>列表1</li>
        <li>列表1</li>
        <li>列表1</li>
    </ul>
    <div>
        <h1>这是标题</h1>
        <h2>这是标题</h2>
    </div>
    <div>
        <h1>这是标题</h1>
        <h2>这是标题</h2>
    </div>

    <input type="text">
</body>
</html>